<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <title>信鸽导航</title>
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="favicon.ico" />
</head>

<body>
    <header class="globalHeader">
        <form action="https://www.baidu.com/s?" method="get">
            <input type="text" class="input-url" name="word" placeholder="请输入搜索内容" onfocus="this.placeholder = ''"
                onblur="this.placeholder='请输入搜索内容'">
            <button type="submit" class="serch">搜索</button>
        </form>
    </header>
    <main class="glabalMain">
        <div class="site">
            <ul>
                <li>
                    <div class="logo"><img src="../image/baidu_favicon.ico" alt="百度logo"></div>
                    <div class="url">百度一下</div>
                    <div class="write" title="修改">
                        <svg class="icon-xiugai">
                            <use xlink:href="#icon-xiugai"></use>
                        </svg>
                    </div>
                </li>
                <li>
                    <div class="logo"><img src="../image/bilibili_favicon.ico" alt="哔哩哔哩logo"></div>
                    <div class="url">哔哩哔哩</div>
                    <div class="write" title="修改">
                        <svg class="icon-xiugai">
                            <use xlink:href="#icon-xiugai"></use>
                        </svg>
                    </div>
                </li>
                <li class="add" onclick="add_show()">
                    <div class="logo">
                        <svg class="icon">
                            <use xlink:href="#icon-add"></use>
                        </svg>
                    </div>
                    <div class="url">添加快捷导航</div>
                </li>
            </ul>
        </div>
        <div class="container">
            <div class="frame">
                <p>添加快捷方式</p>
                <div class="bar">
                    名称
                    <input type="text" name="description" class="url-input first-input">
                </div>
                <div class="bar">
                    网址
                    <input type="url" name="url" class="url-input second-input" oninput="add_blue(sInput1,finish1)">
                </div>
                <div class="button">
                    <button class="modify first">删除</button>
                    <button class="modify second" onclick="cancel(fInput1,sInput1,finish1)">取消</button>
                    <button class="modify last" onclick="done(fInput1,sInput1,finish1,'add')">完成</button>
                </div>
            </div>
        </div>
        <div class="container-change">
            <div class="frame">
                <p>修改快捷方式</p>
                <div class="bar">
                    名称
                    <input type="text" name="description" class="url-input first-input">
                </div>
                <div class="bar">
                    网址
                    <input type="url" name="url" class="url-input second-input" oninput="add_blue(sInput2,finish2)">
                </div>
                <div class="button">
                    <button class="modify first" onclick="del()">删除</button>
                    <button class="modify second" onclick="cancel(fInput2,sInput2,finish2)">取消</button>
                    <button class="modify last" onclick="done(fInput2,sInput2,finish2,'modify')">完成</button>
                </div>
            </div>
        </div>
    </main>
    <script src="//at.alicdn.com/t/font_1821994_nrfo6zhon2i.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="main.js"></script>
</body>

</html>